<!--
 * @Author: csh
 * @Date: 2022-04-15 14:25:25
 * @LastEditors: csh
 * @LastEditTime: 2022-09-30
 * @Description: file content
 * @FilePath: /wochat-vue3-ts-pinia/src/views/chats/ChatPanelAudio.vue
-->
<template>
  <teleport to="body">
    <div v-show="dialogVisible" :class="mergedWarpperCls" ref="wrapperRef">
      <div ref="modalRef" :class="mergedModalCls" :style="mergedModalStyle">
        <div class="audio-panel" @mousedown="handleMoveDown">
          <div class="top">
            <button @click="closeClick"></button>
          </div>
          <div class="middle">
            <img :src="info.url" draggable="false" />
          </div>
          <div class="bottom">
            <div class="name">{{ info.name }}</div>
            <div class="status">
              <div>AWaiting response</div>
              <div></div>
            </div>
            <div class="notice" v-html="info.notice"></div>
            <div class="operation">
              <el-button class="btn" circle><img class="btn-circle-content" :src="info.disconnectBtnUrl"
                  draggable="false" />
              </el-button>
              <div>{{ info.status }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </teleport>
</template>
<script lang="ts" setup>
import { ref, reactive, computed, CSSProperties, nextTick, onMounted } from 'vue';
import { useDraggable } from '@/hooks/use-draggable';

const wrapperRef = ref<HTMLElement | undefined>(undefined);
const modalRef = ref<HTMLElement | undefined>(undefined);
const mergedDraggable = ref(true);
const { position, handleMoveDown } = useDraggable({
  wrapperRef,
  modalRef,
  draggable: mergedDraggable,
});

let wrapperHeight = 0
let wrapperWidth = 0
onMounted(() => {
  wrapperHeight = wrapperRef.value?.clientHeight || 555;
  wrapperWidth = wrapperRef.value?.clientWidth || 666;
});

const mergedWarpperCls = computed(() => [
  'wrapper',
  { 'wrapper-moved': !!position.value }
])
const mergedModalCls = computed(() => [
  'teleport-content',
  { 'teleport-content-moved': !!position.value }
])

const mergedModalStyle = computed(() => {
  const style: CSSProperties = {};
  if (position.value) {
    style.transform = `translate(${position.value[0]}px, ${position.value[1]}px)`;
  } else {
  }
  return style;
});


const dialogVisible = ref(false);
const closeClick = () => {
  dialogVisible.value = false;
};
const show = () => {
  console.log('audio panel show')
  dialogVisible.value = true;
};
defineExpose({
  show,
});

const info = reactive({
  // dialogVisible: false,
  url: '/avator/huangbo.jpeg',
  name: '黄渤',
  notice:
    'Mic not found.<br/>Check device or continue voice call on phone.',
  disconnectBtnUrl: '/ic_google.png',
  status: 'Hang up',
})
</script>

<style lang="less" scoped>
.wrapper {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 101;
  overflow: hidden;
  text-align: center;
}

.wrapper::after {
  display: inline-block;
  width: 0;
  height: 100%;
  vertical-align: middle;
  content: "";
}

.wrapper-moved {
  text-align: left;
}

.teleport-content {
  top: 0;
  vertical-align: middle;
  position: relative;
  display: inline-block;
  margin: 0 auto;
  pointer-events: auto;
  background: transparent;
  text-align: left;
}

.teleport-content-moved {
  vertical-align: top;
}

.header {
  display: flex;
  justify-content: flex-end;
  background: rgb(25, 25, 25);
  border-radius: 4px 4px 0 0;
  height: 40px;

  i {
    margin-top: 6px;
    margin-right: 6px;
    color: white;
    cursor: default;
  }
}

.audio-panel {
  display: hidden;
  // 临时指定宽高
  width: 100%;
  height: 560px;
  background: rgb(25, 25, 25);
  border-radius: 4px;
  color: white;

  .middle {
    // flex: 1;
    height: 45%;
    display: flex;
    justify-content: center;

    img {
      width: 140px;
      height: 140px;
      align-self: flex-end;
      margin-bottom: 10px;
    }
  }

  .bottom {
    height: 55%;
    display: flex;
    align-items: center;
    flex-direction: column;

    .name {
      flex: 1;
      margin-top: 10px;
      margin-bottom: 10px;
    }

    .status {
      flex: 2;
      font-size: 14px;
      color: gray;
    }

    .notice {
      margin: 20px;
      padding: 3px 10px;
      line-height: 20px;
      height: 40px;
      font-size: 8px;
      border-radius: 4px;
      background: rgba(200, 200, 200, 0.3);
    }

    .operation {
      display: flex;
      align-items: center;
      flex-direction: column;
      flex: 4;

      .btn {
        width: 40px;
        height: 40px;
        background: rgb(250, 81, 81);
        border: 0px;
        padding: 0px;
        margin-bottom: 10px;

        img {
          width: 24px;
          height: 240x;
        }
      }
    }
  }
}
</style>
